<template>
  <!-- 交易中的订单 -->
  <div class="trading-container">
    <div class="trading-tab flex-center">
      <div
        @click="onSelectedTab('My profit')"
        class="my-profit-tab"
        :class="{'selected': selectedTab === 'My profit'}"
      >My profit</div>
      <div
        @click="onSelectedTab('Member profit')"
        class="member-profit-tab"
        :class="{'selected': selectedTab === 'Member profit'}"
      >Member profit</div>
    </div>

    <div class="scroll-view">
      <cube-tab-panels v-model="selectedTab">
        <cube-tab-panel label="My profit" key="My profit">
          <ul class="tab-panel-list">
            <li class="tab-panel-li elevation-1" v-for="(mission, i) in tabs[0].missionList">
              <div class="info-wrapper">
                <div class="item-name ellipsis">{{ mission.titleEnglish }}</div>
                <div class="item-name ellipsis">{{ mission.createTime }}</div>

                <div class="amount-wrapper">
                  <div class="item-profit">
                    <div class="price">
                      <!-- <span class="title-color">Member: </span> -->
                      <!-- {{ mission.price }} -->
                    </div>
                  </div>
                  <div class="item-profit">
                    <div class="price">
                      <span class="title-color">Price: </span>
                      {{ mission.price }}
                    </div>
                    <div class="reward">
                      <span class="title-color">Reward: $</span>
                      {{ mission.commission ? mission.commission.toFixed(2) : ''  }}
                    </div>
                  </div>
                </div>

                <!-- <div class="item-actions text-right">
                  <cube-button outline @click="onCancelMission(item.label, mission)">Cancel</cube-button>
                  <cube-button outline @click="onCancelMission(item.label, mission)">Order Upload</cube-button>
                </div>-->
              </div>
            </li>
          </ul>
        </cube-tab-panel>

        <cube-tab-panel key="Member profit" label="Member profit">
          <!-- 只展示会员佣金 -->
          <ul class="tab-panel-list">
            <li class="tab-panel-li elevation-1" v-for="(mission, i) in tabs[1].missionList">
              <div class="info-wrapper">
                <div class="item-name ellipsis">{{ mission.titleEnglish }}</div>
                <div class="item-name ellipsis">{{ mission.createTime }}</div>

                <div class="amount-wrapper">
                  <div class="item-profit">
                    <div class="price">
                      <span class="title-color">Commision: </span>
                      {{ mission.price }}
                    </div>
                  </div>
                  <div class="item-profit">
                    <div class="price">
                      <span class="title-color">Level: </span>
                      {{ mission.price }}
                    </div>
                  </div>
                </div>

                <!-- <div class="item-actions text-right">
                  <cube-button outline @click="onCancelMission(item.label, mission)">Cancel</cube-button>
                  <cube-button outline @click="onCancelMission(item.label, mission)">Order Upload</cube-button>
                </div>-->
              </div>
            </li>
          </ul>
        </cube-tab-panel>

      </cube-tab-panels>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ReqProfitIncome } from '@/api/bean';
import Cookie from 'js-cookie';
import { Api } from '@/api';
declare const $Vue: Vue;

@Component({
  components: {}
})
export default class Trading extends Vue {
  private selectedTab: string = "My profit";

  private tabs: any = [
    {
      label: "My profit",
      icon: "cubeic-like",
      missionList: [
        // {
        //   imageUrl:
        //     "http://img0.imgtn.bdimg.com/it/u=311307345,3690847989&fm=11&gp=0.jpg",
        //   titleEnglish: "Filco Keyboard II Red Filco Keyboard II Red",
        //   price: 25.8,
        //   reward: 25.8,
        //   status: 1
        // },
      ]
    },
    {
      label: "Member profit",
      icon: "cubeic-star",
      missionList: [
        // {
        //   imageUrl:
        //     "http://img0.imgtn.bdimg.com/it/u=311307345,3690847989&fm=11&gp=0.jpg",
        //   titleEnglish: "Filco Keyboard II Red",
        //   price: 25.8,
        //   reward: 25.8,
        //   status: 1
        // }
      ]
    }
  ];

  private onSelectedTab(tab: string) {
    this.selectedTab = tab;
  }

  protected mounted() {
    $Vue.$emit("title", {
      message: "In Transit"
    });
    this.getMyMissionList();
  }

  /**
   * 我的账单
   */
  private async getMyBillList(queryForm?: any) {
    let params: ReqProfitIncome = {
      offset: 0,
      limit: 1000,
      userId: Number(Cookie.get("buyer_userId")),
      // checkStatus: 1,
    };
    if (queryForm) {
      params = queryForm;
    }
    const { data } = await Api.getProfitIncomeList.r(params);
    console.log("getMyBillList", data);
    if (data.result === 0) {
      let $data = data.data;
      this.tabs[0].missionList = $data.dataList;
    } else {
    }
  }


  /**
   * 获取我的任务列表
   */
  private async getMyMissionList() {
    const params: any = {
      limit: 1000,
      offset: 0,
      buyerUserId: Number(Cookie.get("buyer_userId")),
      orderStatusArr: [1, 2, 3, 4, 5]
    };
    const { data } = await Api.getOrderList.r(params);
    console.log("getOrderList", data);
    if (data.result === 0) {
      this.tabs[0].missionList = data.data.dataList;
      // let list: any = [];
      // data.data.dataList.forEach((item: any) => {
      //   if (item.orderStatus >= 1 && item.orderStatus <= 6) {
      //     list.push(item);
      //   }
      // });
      // this.tabs[0].missionList = list;
      // this.getMyMissionList();
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

}
</script>

<style lang="less" scoped>
@import url(../../../../styles/variables.less);
.trading-container {
  width: 100%;
  height: 100%;

  .trading-tab {
    height: 3rem;
    > div {
      width: 6.6rem;
      height: 1.6rem;
      font-size: 0.9rem;
      line-height: 1.6rem;
      border: 1px solid #cdcdcd;
      &.selected {
        background-color: @primary;
        color: white;
      }
    }
    .my-profit-tab {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
    .member-profit-tab {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
      border-left-color: transparent;
    }
  }

  .tab-panel-list {
    width: 100%;
    padding: 2px 1rem;
    box-sizing: border-box;
    .tab-panel-li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.6rem 0.3rem;
      margin-bottom: 0.2rem;
      border: 0.8px solid #efefef;
      border-radius: 8px;
      margin-bottom: 0.4rem;
      .image-wrapper {
        flex-basis: 16%;
        width: 16%;
        img {
          width: 90%;
          height: 90%;
        }
      }
      .info-wrapper {
        flex-basis: 96%;
        width: 96%;
        display: flex;
        flex-direction: column;
        padding-left: 8px;
        box-sizing: border-box;
        .item-name {
          width: 98%;
          font-size: 1.05rem;
          height: 1.2rem;
          line-height: 1.2rem;
          text-align: left;
        }
      }
      .amount-wrapper {
        display: flex;
    justify-content: space-between;
    align-items: center;
      }
      .item-profit {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 4px 0;
      }
      .item-actions {
        display: flex;
        justify-content: flex-end;
        .cube-btn {
          width: auto;
          height: 1.5rem;
          padding: 1px 6px;
          font-size: 0.9rem;
          margin-right: 6px;
        }
      }
    }
  }

  .scroll-view {
    height: calc(100% - 3rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
}
</style>
